<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<style>
 * {
      margin: 0;
      padding: 0;
    }

    table {
      width: 800px;
      text-align: center;
      margin: 30px auto;
    }
</style>
    
<div id="app">
    <form>
        姓名: <input type="text" v-model="userInfo.name"> <br/>
        性别: 
            男<input type="radio" value="男" v-model="userInfo.gender"> 
            女<input type="radio" value="女" v-model="userInfo.gender"> <br/>
        年龄: <input type="text" v-model="userInfo.age"> <br/>
        成绩: <input type="text"v-model="userInfo.score"> <br/>
        <button v-if="isEdit" @click.prevent="editHandler">编辑</button>
        <button v-if="isEdit" @click.prevent="cancelHandler">取消编辑</button>
        <button v-if="!isEdit" @click.prevent="submitHandler">确认添加</button>
    </form>
    <table border="1" cellspacing="0">
        <thead>
           <tr>
            <th>全选 <input type="checkbox" v-model="allbtn"></th>
            <th>ID</th>
            <th>姓名</th>
        
            <th>性别</th>
      
            <th>年龄 
                <span @click="sortHandler('age','asc')">升</span>
                <span @click="sortHandler('age','desc')">降</span>
            </th>
         
            <th>成绩 
                <span @click="sortHandler('score','asc')">升</span>
                <span @click="sortHandler('score','desc')">降</span>
            </th>
         
           
            <th>操作</th>
           </tr>
        </thead>
        <tbody>
            <tr v-for="item in list" :key="item.id">
                <td><input type="checkbox" v-model="item.is_select"></td>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.gender}}</td>
                <td>{{item.age}}</td>
                <td>{{item.score}}</td>
                <td>
                    <button @click="showEditHandler(item)">编辑</button>
                    <button @click="del(item.id)">删除</button>
                </td>




            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>
                    全选<input type="checkbox" v-model="allbtn">
                    
                </td>
                <td colspan="4"></td>
                <td colspan="2">平均成绩:<span>{{ avarageScore.toFixed(1)}}</span></td>

            </tr>
        </tfoot>
    </table>
</div>
<script src="./vue.global.js"></script>
<script>
    const data = [
        {id:1,is_select:false,name:'Lou Santos',age:44,gender:'男',score:130},
        {id:2,is_select:true,name:'Ann Barton',age:28,gender:'女',score:80},
        {id:3,is_select:false,name:'Frederick Fletcher',age:24,gender:'男',score:99}

    ]
    let id=3;
    const {createApp} = Vue;
    createApp({
        data(){
            return {
                list:data,
                // 准备一个属性  采集提交的信息 
                userInfo:{},
                isEdit:false,
                allbtn:false,
                avarageScore:0
            }
        },
        methods:{
            sortHandler(type,method){
                console.log(type,method)
               // type 年龄还是分数
               // method 升序还是降序   
               method === 'asc'?
               this.list.sort((a,b)=>a[type]-b[type]) :
               this.list.sort((a,b)=>b[type]-a[type])
            },
            del(id){
                this.list = this.list.filter(item=>item.id != id)
            },
            submitHandler(){
                this.userInfo.id = ++id;
                this.userInfo.is_select = false;
                this.list.push(this.userInfo)
            },
            showEditHandler(item){
                this.userInfo = JSON.parse(JSON.stringify(item));
                this.isEdit = true
            },
            editHandler(){
                // 因为是双向绑定   页面修改  数据跟着修改 
                // 数据修改 页面也跟着修改 
                // this.userInfo就是最终的数据
                // 新收集 的数据  替换原来的 数据 
                // 数组.splice(开始的索引,删除的个数,添加的元素)

                // console.log(this.userInfo.id)
                const index = this.list.findIndex(item=>item.id === this.userInfo.id)
                this.list.splice(index,1,this.userInfo);
                this.cancelHandler()
            },
            cancelHandler(){
                this.userInfo = {},
                this.isEdit = false
            }
        },
        watch:{

           list:{
                handler(){
                    const res = this.list.reduce((prev,item)=>{
                        return prev + item.score*1
                    },0);

                    this.avarageScore = res / this.list.length;
                    this.allbtn = this.list.every(item=>item.is_select)
                },
                deep:true,
                immediate:true,
           },


            // 全选的状态决定每个元素的状态  
            allbtn(status){
                // alert(status)
                this.list.forEach(item => {
                    item.is_select = status;
                });
            }
        }
    }).mount('#app')
</script>
</body>
</html>